<template>
  <div class="search-page">
    <Search />
    <div class="search-find">
      <div class="find-history col-mar">
        <dt>
          历史搜索
          <a href="">
            <van-icon name="delete-o" size="0.2rem" />
          </a>
        </dt>
        <dd>
          <span>
            <a href="">11</a>
          </span>
        </dd>
        <div class="bottom"></div>
      </div>
      <div class="find-new col-mar">
        <dt>搜索发现</dt>
        <dd>
          <span>
            <a href="">粽子</a>
            <a href="">面膜</a>
            <a href="">螺蛳粉</a>
            <a href="">抽纸</a>
            <a href="">洗衣液</a>
            <a href="">蚊香液</a>
            <a href="">洗脸巾</a>
            <a href="">数据线</a>
          </span>
        </dd>
      </div>
      <div class="hr"></div>
      <div class="find-banner">
        <a href="">
          <img
            src="https://img.alicdn.com/imgextra/i1/2053469401/O1CN01bWpvvB2JJi5mrGpGv_!!2053469401.png"
            alt=""
          />
        </a>
      </div>
      <div class="hr"></div>
      <div class="col-mar list-product">
        <dt>热搜榜</dt>
        <dd class="hot-list" v-for="item in list" :key="item.id">
          <a href="">
            <div class="rank rank1">
              <img :src="item.rank" alt="" />
            </div>
            <div class="product">
              <img :src="item.pic" alt="" />
              <div class="msg">
                <h4>{{ item.title }}</h4>
                <span
                  ><svg
                    t="1623740981982"
                    class="icon"
                    viewBox="0 0 1024 1024"
                    version="1.1"
                    xmlns="http://www.w3.org/2000/svg"
                    p-id="2660"
                    width="0.15rem"
                    height="0.15rem"
                    style="margin-right: 0.04rem"
                  >
                    <path
                      d="M698.7 480.9v429.5c0 54.8-44.5 99.3-99.3 99.3H434c-54.8 0-99.3-44.5-99.3-99.3V480.9H70l446.9-463 446.9 463H698.7z m0 0"
                      fill="#FF353E"
                      p-id="2661"
                    ></path></svg
                  >{{ item.num }}</span
                >
              </div>
              <div
                class="recommend"
                :class="{
                  tuijian: item.class == 1,
                  hot: item.class == 2,
                  new: item.class == 3,
                }"
                v-if="item.name != fales"
              >
                {{ item.name }}
              </div>
            </div>
          </a>
        </dd>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import Search from "../../components/Search/index.vue";
export default defineComponent({
  components: {
    Search,
  },
  setup() {
    const state = reactive({
      list: [
        {
          id: 1,
          title: "一眼万年少女旗袍",
          pic: "https://img.alicdn.com/imgextra/i3/2053469401/O1CN01MrvIVg2JJi5k5ZLRk_!!2053469401.jpg",
          rank: "../../assets/rank/1.png",
          num: 253080,
          name: "荐",
          class: 1,
        },
        {
          id: 2,
          title: "轻松拥有鸡蛋皮",
          pic: "https://img.alicdn.com/imgextra/i4/2053469401/O1CN01ptFDez2JJi5tA9jEf_!!2053469401.jpg",
          rank: "../../assets/rank/2.png",
          num: 237571,
          name: "火",
          class: 2,
        },
        {
          id: 3,
          title: "光泽感底妆气垫",
          pic: "https://img.alicdn.com/imgextra/i4/2053469401/O1CN012KfeF22JJi5m82vUy_!!2053469401.jpg",
          rank: "../../assets/rank/3.png",
          num: 218423,
        },
        {
          id: 4,
          title: "这辣条绝了！",
          pic: "https://img.alicdn.com/imgextra/i2/2053469401/O1CN01z1QwiY2JJi5kfG5wD_!!2053469401.jpg",
          rank: "../../assets/rank/4.png",
          num: 201152,
        },
        {
          id: 5,
          title: "冰镇汽水螺蛳粉",
          pic: "https://img.alicdn.com/imgextra/i1/2053469401/O1CN01pYDDDF2JJi5p6fYuX_!!2053469401.jpg",
          rank: "../../assets/rank/5.png",
          num: 185187,
        },
        {
          id: 6,
          title: "夏天不做“包”大人",
          pic: "https://img.alicdn.com/imgextra/i1/2053469401/O1CN01zA2Q252JJi5r3HJpX_!!2053469401.jpg",
          rank: "../../assets/rank/6.png",
          num: 167577,
          name: "新",
          class: 3,
        },
        {
          id: 7,
          title: "女明星同款c位高光",
          pic: "https://img.alicdn.com/imgextra/i2/2053469401/O1CN01AuBR6t2JJi5hWmf22_!!2053469401.jpg",
          rank: "../../assets/rank/7.png",
          num: 149752,
        },
        {
          id: 8,
          title: "绝美耳饰get",
          pic: "https://img.alicdn.com/imgextra/i4/2053469401/O1CN0194cEjf2JJi5bjpS7N_!!2053469401.jpg",
          rank: "../../assets/rank/8.png",
          num: 124236,
        },
        {
          id: 9,
          title: "初夏水果色系指甲油",
          pic: "https://img.alicdn.com/imgextra/i3/2053469401/O1CN01MrvIVg2JJi5k5ZLRk_!!2053469401.jpg",
          rank: "../../assets/rank/9.png",
          num: 124236,
        },
        {
          id: 10,
          title: "小甜剧女主穿搭法则",
          pic: "https://img.alicdn.com/imgextra/i1/2053469401/O1CN01rnKNWu2JJi5nHuREJ_!!2053469401.jpg",
          rank: "../../assets/rank/10.png",
          num: 113754,
        },
      ],
      scrollTopNum: "",
    });

    return {
      ...toRefs(state),
    };
  },
});
</script>
<style lang="stylus" scoped>
dd, dt, h4 {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.hr {
  background: #F5F5F5;
  height: 0.1rem;
}

.search-find {
  .list-product {
    display: block;

    .hot-list {
      margin-bottom: 0.12rem;
      position: relative;
      height: 0.58rem;

      a {
        display: flex;
        align-items: center;

        .product {
          flex: 1;

          .tuijian {
            color: #16BE7D;
            background: #ebfbe7;
            border: 1px solid #94e6c6;
          }

          .huo {
            background: #ffebe1;
            border: 1px solid #ffb7ac;
            color: #FF0001;
          }

          .new {
            color: #E88900;
            background: #fff7df;
            border: 1px solid #f6d896;
          }

          .recommend {
            padding: 0 2px;
            height: 14px;
            background: #fff4ed;
            border-radius: 3px;
            border: 1px solid #ffbe95;
            font-size: 10px;
            font-weight: 400;
            color: #f16005;
            line-height: 16px;
            display: inline-block;
            position: absolute;
            right: 0;
            top: 22%;
            overflow: hidden;
          }

          .tuijian {
            color: #16BE7D;
            background: #ebfbe7;
            border: 1px solid #94e6c6;
          }

          .msg {
            display: flex;
            flex-direction: column;
            margin-left: 0.7rem;
            height: 0.58rem;
            overflow: hidden;

            h4 {
              height: 0.2rem;
              font-size: 0.14rem;
              font-weight: 400;
              color: #333;
              line-height: 0.2rem;
              margin-bottom: 0.03rem;
              overflow: hidden;
              width: 60%;
            }

            span {
              height: 0.17rem;
              font-size: 0.12rem;
              font-weight: 400;
              color: #888;
              line-height: 0.17rem;

              svg {
                font-size: 0.1rem;
                margin-right: 0.04rem;
              }
            }
          }

          img {
            width: 0.58rem;
            height: 0.58rem;
            border-radius: 0.05rem;
            float: left;
          }
        }

        .rank {
          img {
            min-width: 0.12rem;
            height: 0.28rem;
            display: block;
          }
        }

        .rank1 {
          margin-right: 0.16rem;
        }
      }
    }
  }

  .find-banner {
    height: 1.18rem;
    width: 100%;

    a {
      img {
        display: block;
        height: 100%;
        width: 100%;
      }
    }
  }

  dd {
    max-height: 67px;
    overflow: hidden;

    span {
      display: inline-block;
      position: relative;
      line-height: 26px;
      overflow: visible !important;
      white-space: nowrap;
      float: left;
      margin: 0 1% 8px;
      height: unset !important;
      max-width: unset !important;
      width: 100%;
      margin-bottom: 0 !important;

      a {
        position: relative;
        z-index: 1;
        zoom: 1;
        margin: 0 1% 0.08rem;
        display: inline-block;
        background: #F6F6F6;
        border-radius: 0.15rem;
        font-size: 0.1rem;
        padding: 0 0.15rem;
        max-width: 88%;
        color: #666;
        float: left;
        height: 0.26rem;
        line-height: 0.26rem;
        overflow: visible !important;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }

  dt {
    position: relative;
    z-index: 1;
    zoom: 1;
    margin-bottom: 0.11rem;
    height: 0.18rem;
    font-size: 0.13rem;
    font-weight: 600;
    color: #333;
    line-height: 0.18rem;
    margin-top: 0.12rem;

    a {
      position: absolute;
      z-index: 1;
      zoom: 1;
      right: 0;
      top: 0;
      color: #666;
    }
  }

  .find-history {
    display: none;

    .bottom {
      height: 1px;
      overflow: hidden;
      background: #E6E6E6;
      position: relative;
      z-index: 1;
      zoom: 1;
      top: 10px;
    }
  }
}

.col-mar {
  margin: 0 0.1rem;
}
</style>
